<template>
	<div class="operation-log-detail">
		<el-row :gutter="20">
			<!-- 基本信息 -->
			<el-col :span="12">
				<el-card shadow="hover" class="detail-card">
					<div class="card-title">
						<i class="el-icon-info"></i>
						基本信息
					</div>
					<el-descriptions :column="1" size="small">
						<el-descriptions-item label="日志ID">
							{{ logData.id }}
						</el-descriptions-item>
						<el-descriptions-item label="用户名">
							{{ logData.username }}
						</el-descriptions-item>
						<el-descriptions-item label="真实姓名">
							{{ logData.realName }}
						</el-descriptions-item>
						<el-descriptions-item label="操作类型">
							<el-tag :type="getOperationTypeTagType(logData.operationType)" size="small">
								{{ getOperationTypeLabel(logData.operationType) }}
							</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="操作描述">
							{{ logData.operationDesc || '-' }}
						</el-descriptions-item>
						<el-descriptions-item label="请求方法">
							<el-tag size="small">{{ logData.method || '-' }}</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="请求URL">
							{{ logData.url || '-' }}
						</el-descriptions-item>
						<el-descriptions-item label="操作状态">
							<el-tag :type="logData.status === 'SUCCESS' ? 'success' : 'danger'" size="small">
								{{ logData.status === 'SUCCESS' ? '成功' : '失败' }}
							</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="执行耗时">
							{{ logData.executionTime ? logData.executionTime + 'ms' : '-' }}
						</el-descriptions-item>
						<el-descriptions-item label="操作时间">
							{{ formatDateTime(logData.createdAt) }}
						</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-col>

			<!-- 环境信息 -->
			<el-col :span="12">
				<el-card shadow="hover" class="detail-card">
					<div class="card-title">
						<i class="el-icon-location"></i>
						环境信息
					</div>
					<el-descriptions :column="1" size="small">
						<el-descriptions-item label="IP地址">
							{{ logData.ip }}
						</el-descriptions-item>
						<el-descriptions-item label="操作地点">
							{{ logData.location || '-' }}
						</el-descriptions-item>
						<el-descriptions-item label="浏览器">
							{{ logData.browser || '-' }}
						</el-descriptions-item>
						<el-descriptions-item label="操作系统">
							{{ logData.os || '-' }}
						</el-descriptions-item>
						<el-descriptions-item label="设备类型">
							{{ logData.device || '-' }}
						</el-descriptions-item>
						<el-descriptions-item label="用户代理">
							<div class="user-agent">{{ logData.userAgent || '-' }}</div>
						</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-col>
		</el-row>

		<el-row :gutter="20" style="margin-top: 20px;">
			<!-- 请求参数 -->
			<el-col :span="12">
				<el-card shadow="hover" class="detail-card">
					<div class="card-title">
						<i class="el-icon-document"></i>
						请求参数
					</div>
					<div class="code-container">
						<pre v-if="logData.requestParams"><code>{{ formatJson(logData.requestParams) }}</code></pre>
						<div v-else class="no-data">无请求参数</div>
					</div>
				</el-card>
			</el-col>

			<!-- 响应结果 -->
			<el-col :span="12">
				<el-card shadow="hover" class="detail-card">
					<div class="card-title">
						<i class="el-icon-message"></i>
						响应结果
					</div>
					<div class="code-container">
						<pre v-if="logData.responseResult"><code>{{ formatJson(logData.responseResult) }}</code></pre>
						<div v-else class="no-data">无响应结果</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- 异常信息 -->
		<el-row v-if="logData.status === 'FAILED' && logData.errorMsg" style="margin-top: 20px;">
			<el-col :span="24">
				<el-card shadow="hover" class="detail-card error-card">
					<div class="card-title">
						<i class="el-icon-warning"></i>
						异常信息
					</div>
					<div class="error-container">
						<div class="error-msg">{{ logData.errorMsg }}</div>
						<div v-if="logData.errorStack" class="error-stack">
							<h4>异常堆栈：</h4>
							<pre>{{ logData.errorStack }}</pre>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- 操作追踪 -->
		<el-row v-if="logData.traceId" style="margin-top: 20px;">
			<el-col :span="24">
				<el-card shadow="hover" class="detail-card">
					<div class="card-title">
						<i class="el-icon-connection"></i>
						操作追踪
					</div>
					<el-descriptions :column="3" size="small">
						<el-descriptions-item label="追踪ID">
							<el-tag size="small">{{ logData.traceId }}</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="会话ID">
							<el-tag size="small" type="info">{{ logData.sessionId || '-' }}</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="请求ID">
							<el-tag size="small" type="warning">{{ logData.requestId || '-' }}</el-tag>
						</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	name: 'OperationLogDetail',
	props: {
		logData: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			// 操作类型选项
			operationTypes: [
				{ label: '用户登录', value: 'LOGIN' },
				{ label: '用户登出', value: 'LOGOUT' },
				{ label: '新增', value: 'CREATE' },
				{ label: '修改', value: 'UPDATE' },
				{ label: '删除', value: 'DELETE' },
				{ label: '查询', value: 'QUERY' },
				{ label: '导入', value: 'IMPORT' },
				{ label: '导出', value: 'EXPORT' },
				{ label: '文件上传', value: 'UPLOAD' },
				{ label: '文件下载', value: 'DOWNLOAD' }
			]
		}
	},
	methods: {
		// 获取操作类型标签类型
		getOperationTypeTagType(operationType) {
			const typeMap = {
				'LOGIN': 'success',
				'LOGOUT': 'info',
				'CREATE': 'primary',
				'UPDATE': 'warning',
				'DELETE': 'danger',
				'QUERY': '',
				'IMPORT': 'success',
				'EXPORT': 'primary',
				'UPLOAD': 'warning',
				'DOWNLOAD': 'info'
			}
			return typeMap[operationType] || ''
		},

		// 获取操作类型标签
		getOperationTypeLabel(operationType) {
			const type = this.operationTypes.find(t => t.value === operationType)
			return type ? type.label : operationType
		},

		// 格式化JSON
		formatJson(jsonStr) {
			if (!jsonStr) return ''
			try {
				const jsonObj = typeof jsonStr === 'string' ? JSON.parse(jsonStr) : jsonStr
				return JSON.stringify(jsonObj, null, 2)
			} catch (e) {
				return jsonStr
			}
		},

		// 格式化日期时间
		formatDateTime(dateTime) {
			if (!dateTime) return '-'
			return new Date(dateTime).toLocaleString('zh-CN')
		}
	}
}
</script>

<style scoped>
.operation-log-detail {
}

.operation-log-detail .detail-card {
	height: 100%;
}

	.operation-log-detail .card-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 500;
	color: #303133;
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e4e7ed;
}

.operation-log-detail .card-title i {
	color: #409EFF;
}

/* 代码容器 */
.operation-log-detail .code-container {
	background-color: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 4px;
	padding: 12px;
	max-height: 300px;
	overflow-y: auto;
}

.operation-log-detail .code-container pre {
	margin: 0;
	font-family: 'Courier New', monospace;
	font-size: 12px;
	line-height: 1.5;
	color: #333;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.operation-log-detail .code-container code {
	background: none;
	padding: 0;
	border: none;
}

.operation-log-detail .no-data {
	text-align: center;
	color: #909399;
	font-style: italic;
	padding: 20px 0;
}

/* 用户代理 */
.operation-log-detail .user-agent {
	word-break: break-all;
	font-size: 12px;
	color: #606266;
	background-color: #f5f7fa;
	padding: 8px;
	border-radius: 4px;
	border: 1px solid #e4e7ed;
}

/* 异常信息 */
.operation-log-detail .error-card {
	border-left: 4px solid #F56C6C;
}

.operation-log-detail .error-container {
	padding: 12px;
}

.operation-log-detail .error-msg {
	background-color: #FEF0F0;
	border: 1px solid #FDE2E2;
	border-radius: 4px;
	padding: 12px;
	color: #F56C6C;
	margin-bottom: 12px;
}

.operation-log-detail .error-stack {
	background-color: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 4px;
	padding: 12px;
}

.operation-log-detail .error-stack h4 {
	margin: 0 0 8px 0;
	color: #F56C6C;
	font-size: 14px;
}

.operation-log-detail .error-stack pre {
	margin: 0;
	font-family: 'Courier New', monospace;
	font-size: 12px;
	line-height: 1.4;
	color: #666;
	white-space: pre-wrap;
	word-wrap: break-word;
	max-height: 200px;
	overflow-y: auto;
}

/* Element UI 样式调整 */
.operation-log-detail .el-descriptions {
	padding: 0 8px;
}

.operation-log-detail .el-descriptions-item__label {
	font-weight: 500;
	color: #606266;
	width: 100px;
}

.operation-log-detail .el-descriptions-item__content {
	color: #303133;
}

.operation-log-detail .el-tag {
	margin-right: 4px;
}
</style>